<template>
  <view class="container">
    <scroll-view
      scroll-y
      :scroll-top="scrollTop"
      :scroll-with-animation="true"
      refresher-enabled
      :refresher-triggered="refreshStatus"
      :enable-back-to-top="true"
      @refresherrefresh="resetRefresh(true)"
      @scrolltolower="reachBottom"
    >
      <view class="record-list">
        <block v-for="record in dataSource" :key="record.id">
          <ve-card class="relet-info" :title="`违章单号：${record.violantionCode || '-'}`" fold v-model:initFold="record.initExpand">
            <template #status>
              <view class="status" v-if="record.eventStatusStr">
                {{ record.eventStatusStr }}
              </view>
            </template>
            <RecordTags v-if="record.violationLabelList.length > 0" :list="record.violationLabelList" />
            <ve-cell label="违章单关联门店">{{ record.siteName || '-' }}</ve-cell>
            <ve-cell label="车牌号">{{ record.licenseNo || '-' }}</ve-cell>
            <ve-cell label="车辆当前归属门店">{{ record.carSiteName || '-' }} </ve-cell>
            <ve-cell label="违章时间">{{ record.eventTime || '-' }}</ve-cell>
            <ve-cell-val label="违章发生方" :value="record.violationPartyName" />
            <ve-cell label="关联订单号">
              <view v-if="record.orderCode">
                <view class="order_no" @click.stop="toOrder(record)">
                  {{ record.orderCode }}
                  <ve-icon name="arrow_right_0" size="32"></ve-icon>
                </view>
                <view class="line-ellipsis" v-if="record.giveStaffName" style="width: 400rpx">
                  交车人：{{ record.giveStaffName || '-' }}
                </view>
                <view>违章押金收取方式：{{ record.violationChargeTypeName || '-' }}</view>
              </view>
              <text v-else>-</text>
            </ve-cell>
            <ve-cell label="承租人信息">
              <template v-if="record.memberName && record.memberPhone"> {{ record.memberName }} | {{ record.memberPhone }} </template>
              <template v-else>-</template>
            </ve-cell>
            <ve-cell label="违章城市">{{ record.eventCityName || '-' }}</ve-cell>
            <ve-cell-val label="罚分" :value="record.eventScore" unit="分" />
            <ve-cell-price label="罚款" :value="record.eventAmount" />
            <ve-cell label="处理方">{{ record.handleTypeName || '-' }}</ve-cell>
            <ve-cell-price label="违章代办收入" :value="record.incomeAmount" />
            <ve-cell-price label="代办服务费" :value="record.handleAmount" />
            <ve-cell-price label="违章代办真实成本" :value="record.handleRealCost" />
            <ve-cell label="违章状态">{{ record.eventStatusStr || '-' }}</ve-cell>
            <ve-cell-val label="费用状态" :value="record.violationFeeStateName" />
            <ve-cell-val label="催缴状态" :value="record.urgePayStatusName" />
            <ve-cell label="负责人">{{ record.staffName || '-' }}</ve-cell>
          </ve-card>
        </block>
      </view>
      <!-- 加载结束列表为空时展示 -->
      <ve-empty v-if="dataSource.length == 0 && loadStatus == 'nomore'"></ve-empty>
      <!-- 底部加载状态 -->
      <ve-load-more v-else :status="loadStatus" bgColor="#F7F7F9"></ve-load-more>
    </scroll-view>
  </view>
</template>

<script setup>
  import RecordTags from '../../car-violation/components/record-tags.vue'

  import { ref } from 'vue'
  import { onLoad } from '@dcloudio/uni-app'
  import useList from '@/hooks/useList'
  import { usePermission } from '@/hooks/usePermission'

  const queryParam = ref({})

  const { resetRefresh, reachBottom, loadData, scrollTop, loadStatus, refreshStatus, dataSource } = useList(
    '/V5/violation/getList',
    queryParam,
    (result) => {
      console.log(result)
      result.forEach((item) => {
        item.initFold = true
      })
    },
  )

  const toOrder = (record) => {
    const { type, orderId } = record
    if (type == 1) {
      if (usePermission('svmsapp:order:short-order.view')) {
        uni.navigateTo({
          url: '/pages/order/short-order/detail/index?id=' + orderId,
        })
      }
    } else {
      if (usePermission('svmsapp:order:long-order.view')) {
        uni.navigateTo({
          url: '/pages/order/long-order/detail/index?id=' + orderId,
        })
      }
    }
  }

  onLoad((options) => {
    queryParam.value = {
      carId: options.id,
    }
    loadData()
  })
</script>

<style lang="less" scoped>
  .container {
    height: 100vh;
    padding: 24rpx 24rpx;
    background: #f7f8fa;
  }

  .order_no {
    display: flex;
    align-items: center;
    color: #3072f6;
    font-weight: 400;
  }

  .status {
    font-size: 28rpx;
    font-weight: 400;
    color: #e59b1c;
    margin-left: 16rpx;
  }
  :deep(.ve-cell-title) {
    width: 240rpx;
    max-width: 240rpx;
  }
</style>
